class Header extends HTMLElement {
    constructor() {
        super();
        this.render();
    }

    static get observedAttributes() {
        return ['page-title', 'header-image'];
    }

    attributeChangedCallback(name, oldValue, newValue) {
        if (name === 'page-title' || name === 'header-image') {
            this.render();
        }
    }

    getPageTitle() {
        return this.getAttribute('page-title') || 'Campus Noticeboard';
    }

    getHeaderImage() {
        return this.getAttribute('header-image') || '../assets/images/header_post.png';
    }

    render() {
        this.innerHTML = `
            <header class="main-header">
                <div class="header-content">
                    <h1 class="title-text">${this.getPageTitle()}</h1>
                    <div class="header-background">
                        <img src="${this.getHeaderImage()}" alt="Header Background" class="header-image">
                    </div>
                </div>
            </header>
        `;
    }
}

customElements.define('app-header', Header);